<template>
	<view class='tabbar'>
		<view  class='tabbar-item' v-for='(item,index) of tabbarList' :key='index' @click='handleItemTap(item,index)'>
		  <view class='tabbar-item-icon'>
					<image :src="activeIdx === index ? item.selectedIconPath : item.iconPath" mode="widthFix"></image>
		  </view>
				<view :class="{'tabbar-item-text':true,'active':activeIdx === index}">{{item.text}}</view>
		</view>
		
	</view>
</template>

<script>
	import tabbarList from "./tabBarRouter.js";
	export default{
		data(){
			return{
				activeIdx:0,
				tabbarList
			}
		},

		methods:{
			initIndex(){
				console.log(getApp().globalData.navBarIndex)
				//初始化选择状态
				let index=getApp().globalData.navBarIndex
				if(!isNaN(index)){
					this.activeIdx=index
					wx.switchTab({
						url:`/${this.tabbarList[index].pagePath}`
					})
				}
			},
			
			handleItemTap(item,index){
				getApp().globalData.navBarIndex = index;
				// console.log(item , index)
				uni.switchTab({
					url:`/${item.pagePath}`
				})
			},
		},
		mounted() {
			let pages = getCurrentPages();
			let route = pages[pages.length - 1].route;
			for (let i = 0 ; i < this.tabbarList.length; i++){
				if (this.tabbarList[i].pagePath == route){
					getApp().globalData.navBarIndex = i;
				}
			}
			this.initIndex()
		}
	}
</script>

<style scoped>
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0,0,0,0.06);
		display: flex;
		font-size: 0;
		background: #fff;
	}
	.tabbar-item {
	  flex: 1;
	  text-align: center;
	  overflow: hidden;
	  box-sizing: border-box;
	  padding: 8rpx 10rpx 0;
	  color: #333333;
	  position: re;
	}
	
	.tabbar-item-icon {
	  margin-bottom: 6rpx;
	  height: 56rpx;
	}
	
	.tabbar-item-icon image {
	  width: 56rpx;
	  height: 56rpx;
	}
	
	.tabbar-item-text {
	  font-size: 18rpx;
	  line-height: 20rpx;
	  color: #25262F;
	}
	.active {
	  color: #25262F
	}
</style>
